<template>
  <div>
    <div class="user-info-head" @click="editCropper()">
      <img :src="avatar" title="点击上传头像" class="img-circle img-lg" />
    </div>
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body @close="closeHandle" @opened="modalOpened">
      <el-row>
        <el-col :xs="24" :md="12" :style="{height: '350px'}">
          <vue-cropper
            ref="cropper"
            :img="options.img"
            :info="true"
            :autoCrop="options.autoCrop"
            :autoCropWidth="options.autoCropWidth"
            :autoCropHeight="options.autoCropHeight"
            :fixedBox="options.fixedBox"
            @realTime="realTime"
            v-if="visible"
          />
        </el-col>
        <el-col :xs="24" :md="12" :style="{height: '350px'}">
          <div class="avatar-upload-preview">
            <img :src="previews.url" :style="previews.img" />
          </div>
        </el-col>
      </el-row>
      <br />
      <el-row>
        <el-col :lg="2" :md="2">
          <el-upload action="#" :http-request="requestUpload" :show-file-list="false" :before-upload="beforeUpload">
            <el-button size="small">
              上传
              <i class="el-icon-upload el-icon--right"></i>
            </el-button>
          </el-upload>
        </el-col>
        <el-col :lg="{span: 1, offset: 2}" :md="2">
          <el-button icon="el-icon-plus" size="small" @click="changeScale(1)"></el-button>
        </el-col>
        <el-col :lg="{span: 1, offset: 1}" :md="2">
          <el-button icon="el-icon-minus" size="small" @click="changeScale(-1)"></el-button>
        </el-col>
        <el-col :lg="{span: 1, offset: 1}" :md="2">
          <el-button icon="el-icon-refresh-left" size="small" @click="rotateLeft()"></el-button>
        </el-col>
        <el-col :lg="{span: 1, offset: 1}" :md="2">
          <el-button icon="el-icon-refresh-right" size="small" @click="rotateRight()"></el-button>
        </el-col>
        <el-col :lg="{span: 2, offset: 6}" :md="2">
          <el-button type="primary" :disabled="this.oldImage === ''" size="small" @click="uploadImg()">提 交</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
  import { getUUID } from "assets/js/utils"

  export default {
    name: 'user-avatar',
    data() {
      return {
        // 是否显示弹出层
        open: false,
        // 是否显示cropper
        visible: false,
        // 弹出层标题
        title: "修改头像",
        /*options: {
          img: 'https://picsum.photos/id/1005/300/300', //裁剪图片的地址
          autoCrop: true, // 是否默认生成截图框
          autoCropWidth: 200, // 默认生成截图框宽度
          autoCropHeight: 200, // 默认生成截图框高度
          fixedBox: true // 固定截图框大小 不允许改变
        },
        previews: {
          img: '', // 裁剪图片的地址
          info: true, // 裁剪框的大小信息
          outputSize: 0.8, // 裁剪生成图片的质量
          outputType: 'jpeg', // 裁剪生成图片的格式
          canScale: true, // 图片是否允许滚轮缩放
          autoCrop: true, // 是否默认生成截图框
          autoCropWidth: 1200, // 默认生成截图框宽度
          autoCropHeight: 240, // 默认生成截图框高度
          fixedBox: true, // 固定截图框大小 不允许改变
          fixed: true, // 是否开启截图框宽高固定比例
          fixedNumber: [25, 6], // 截图框的宽高比例
          // full: true, // 是否输出原图比例的截图
          canMoveBox: false, // 截图框能否拖动
          original: false, // 上传图片按照原始比例渲染
          centerBox: true, // 截图框是否被限制在图片里面
          infoTrue: false, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
          mode: 'cover',    // cover  图片铺满容器
        },*/
        options: {
          img: '', //裁剪图片的地址
          autoCrop: true, // 是否默认生成截图框
          autoCropWidth: 200, // 默认生成截图框宽度
          autoCropHeight: 200, // 默认生成截图框高度
          fixedBox: true // 固定截图框大小 不允许改变
        },
        previews: {},
        // 阿里云图片上传携带信息
        uploadObj: {
          policy: "",
          signature: "",
          key: "",
          ossaccessKeyId: "",
          dir: "",
          host: "",
          expire: ''
        },
        // 旧头像
        oldImage: '',
      };
    },
    computed: {
      // 用户头像显示
      avatar() {
        return this.$store.state.user.avatar
      }
    },
    methods: {
      // 编辑头像
      editCropper() {
        if (true) {
          // TODO 暂时不支持头像修改
          return;
        }
        // 初始化图片
        if (!this.avatar.includes("picsum")) {
          let _this = this;
          // 设置头像base64
          // 其中this.avatar为当前头像
          this.setAvatarBase64(this.avatar, base64 => {
            _this.options.img = base64;
          });
        } else {
          this.options.img = this.avatar
        }
        this.open = true;
      },
      closeHandle() {
        this.oldImage = ''    // 重置为空
        this.options.img = '' // 重置为空
      },
      // 打开弹出层结束时的回调
      modalOpened() {
        this.visible = true;
      },
      // 覆盖默认的上传行为
      requestUpload() {
      },
      // 向左旋转
      rotateLeft() {
        this.$refs.cropper.rotateLeft();
      },
      // 向右旋转
      rotateRight() {
        this.$refs.cropper.rotateRight();
      },
      // 图片缩放
      changeScale(num) {
        num = num || 1;
        this.$refs.cropper.changeScale(num);
      },
      // 上传预处理
      beforeUpload(file) {
        if (file.type.indexOf("image/") == -1) {
          this.$notify({
            title: '警告',
            type: 'warning',
            message: '文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。',
            offset: 100,
            duration: 1500
          });
        } else {
          if (this.oldImage === '') {
            this.oldImage = this.avatar
          }
          console.log("旧图", this.oldImage)

          // 加载图片
          const reader = new FileReader();
          reader.readAsDataURL(file);
          reader.onload = () => {
            this.options.img = reader.result;
          };
        }

      },
      // 上传图片
      uploadImg() {
        // 更新新头像
        let _self = this
        // let flag = false
        new Promise((resolve, reject) => {

          let time = Math.ceil(Date.now() / 1000)
          if (_self.uploadObj.policy !== '' && _self.uploadObj.expire !== '' && time < Number(_self.uploadObj.expire)) {
            // flag = true
            resolve()
          } else {
            this.$axios.get('/oss/policy')
              .then( ( { data } ) => {
                // flag = true
                console.log("签证: ", data)
                resolve(data)
              })
          }
        }).then(res => {
          console.log("签证信息: ", res)
          // 存储签证信息
          if (res) {
            let data = res.data
            _self.uploadObj.policy = data.policy;
            _self.uploadObj.signature = data.signature;
            _self.uploadObj.ossaccessKeyId = data.accessId;
            _self.uploadObj.dir = data.dir;
            _self.uploadObj.host = data.host;
            _self.uploadObj.expire = data.expire;
            console.log("数据, ", _self.uploadObj)
          }
        }).then(() => {
          return new Promise((resolve, reject) => {
            this.$refs.cropper.getCropBlob((data) => {
              let file = new File([data], 'avatar.jpg',{type: data.type,  lastModified: Date.now()});

              let imageUrl = _self.uploadObj.dir + getUUID() + '_' + file.name

              let obj = new FormData();
              obj.append("policy", _self.uploadObj.policy);
              obj.append("signature", _self.uploadObj.signature);
              obj.append("key", imageUrl);
              obj.append("ossaccessKeyId", _self.uploadObj.ossaccessKeyId);
              obj.append("dir", _self.uploadObj.dir);
              obj.append("host", _self.uploadObj.host);
              obj.append("expire", _self.uploadObj.expire);
              obj.append("file", file);

              this.$axios.$post('https://zfk-oss.oss-cn-zhangjiakou.aliyuncs.com', obj )
                .then(() => {
                  this.$notify({
                    title: '图片上传',
                    type: 'success',
                    message: '用户头像上传成功',
                    offset: 100,
                    duration: 1500
                  });
                })
              resolve(imageUrl)   // 返回图片路径
            });
          })

        }).then(imageUrl => {
          // TODO 修改用户信息表内容
          console.log("路径: ", imageUrl)
          if (!this.oldImage.includes("picsum")) {
            // Array.of( file.url.split("com/")[1]
            this.$axios.$post('/oss/delete', [ this.oldImage.split('com/')[1] ])
          } else {
            console.log("哪里哪里")
          }
          imageUrl = _self.uploadObj.host + '/' + imageUrl
          console.log("新路径: ", imageUrl)
          this.$axios.get('app/user/update/avatar', { params: { avatar: imageUrl }})
            .then(({data}) => {
              if (data && data.code === 0) {
                this.$notify({
                  title: '头像修改',
                  type: 'success',
                  message: '用户头像修改成功, 刷新即可完成修改',
                  offset: 100,
                  duration: 1500,
                });
                // this.$store.commit('user/setAvatar', imageUrl)  // 修改缓存中的头像
                this.open = false
              } else {
                this.$notify({
                  title: '头像修改',
                  type: 'error',
                  message: '用户头像修改失败',
                  offset: 100,
                  duration: 1500
                });
              }
            })
        })
      },
      // 实时预览
      realTime(data) {
        this.previews = data;
      },
      // 设置头像base64
      setAvatarBase64(src, callback) {
        let _this = this;
        let image = new Image();
        // 处理缓存
        image.src = src + "?v=" + Math.random();
        // 支持跨域图片
        image.crossOrigin = "*";
        image.onload = function() {
          let base64 = _this.transBase64FromImage(image);
          callback && callback(base64);
        };
      },
      // 将网络图片转换成base64格式
      transBase64FromImage(image) {
        let canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;
        let ctx = canvas.getContext("2d");
        ctx.drawImage(image, 0, 0, image.width, image.height);
        // 可选其他值 image/jpeg
        return canvas.toDataURL("image/png");
      },
    }
  };
</script>

<style>

.img-circle {
  border-radius: 50%;
}

.img-lg {
  width: 120px;
  height: 120px;
}

.avatar-upload-preview {
  position: absolute;
  top: 50%;
  transform: translate(50%, -50%);
  width: 180px;
  height: 180px;
  border-radius: 50%;
  box-shadow: 0 0 4px #ccc;
  overflow: hidden;
}

.user-info-head {
  position: relative;
  display: inline-block;
  height: 120px;
}

.user-info-head:hover:after {
  content: '+';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  color: #eee;
  background: rgba(0, 0, 0, 0.5);
  font-size: 24px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  cursor: pointer;
  line-height: 110px;
  border-radius: 50%;
}
</style>
